<template>
    <div ref="echartBar"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import axios from 'axios';
  
  const echartBar = ref(null);
  let options = ref([]);
  
  function chartBartInit() {
    const myChart = echarts.init(echartBar.value,"dark",{
        width: 480,height: 400,
    });
  
    const xAxisData = options.value.map(item => item.interested_domain);
    const seriesData = options.value.map(item => item.occurrence_count);
  
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      title: {
        text: '学生兴趣领域分布',
        left: 'center',
        top: 20,
        textStyle: { color: '#FF6060' }
      },
      legend: {
        data: ['人数']
      },
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        right: 30 // 将图表向左移动，这里设置为容器宽度的10%
        },
      series: [
        {
          name: '人数',
          type: 'bar',
          data: seriesData
        }
      ]
    };
  
    myChart.setOption(option);
  }
  
  function getData() {
    axios.get('/stu-api/queryAllins')
      .then(response => {
         console.log(response)
          options.value = response.data.data;
          chartBartInit();
        
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
  
  onMounted(() => {
    getData();
  });
  </script>
  
  <style scoped>
  .chart-container {
    width: 80%; 
/* 设置容器宽度为视口宽度的80% */
  margin: 0 auto; /* 居中显示容器 */
  padding: 20px; /* 添加一些内边距，使图表与容器边缘保持一定距离 */
  box-sizing: border-box; /* 包括内边距和边框在内的元素总宽度和高度 */
}
  </style>